<template>
	<div>
		<div class="container" v-if="!searching">
			<div class="header">
				<div class="box" @click="onSearching">
					<img src="../../src/assets/images/icon/search.png" alt="">
					<div class="text">搜索书籍</div>
				</div>
			</div>
			<div class="sub-container">
				<img src="../../src/assets/images/book/quality.png" alt="" class="head-img">
				<div class="books-container">
					<vBook :book="book" v-for="(book,index) of books" :key="index"></vBook>
				</div>
			</div>
			<Tab></Tab>	
		</div>
		<vSearch :more="more" v-if="searching" @cancel="onCancel"></vSearch>
	</div>
</template>

<script>
//预设data不能为null，会报错
//组件@click，要触发原生事件要加@click.native
import Tab from '../components/tab/tab.vue'
import {BookModel} from '../models/book.js'
let bookModel=new BookModel()
import vBook from '../components/book/book.vue'
import vSearch from '../components/search/search.vue'
import {random} from '../utils/common.js'
export default{
	name:'bookPage',
	data(){
		return{
			books:[],
			searching:false,
			more:''
		}
	},
	components:{
		Tab,vBook,vSearch
	},
	created(){
		bookModel.getHotList().then(res=>{
			this.books=res.data
		})
		bookModel.getMyBookCount().then(res=>{
		})
	},
	activated(){
	},
	mounted(){
		window.addEventListener('scroll',()=>{
   		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
   		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
   		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight
      if(scrollTop+windowHeight==scrollHeight){
				this.more=random(16)
			}
		})
	},
	methods:{
		onSearching(){
			this.searching=true
		},
		onCancel(){
			this.searching=false
		}
	}	

}
</script>
<style lang="stylus" scoped>
.container{display: flex;flex-direction: column;align-items: center;width: 100%;}
.sub-container {display: flex;flex-direction: column;align-items: center;background-color: #fff;margin-top: 50px;margin-bottom: 51px;}
.box {display: flex;flex-direction: row;justify-content: center;align-items: center;border-radius: 50px;background-color: #f5f5f5;height: 34px;width: 350px;color: #999999;}
.header {position: fixed;top:0;background-color: #ffffff;height: 50px;width: 100%;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;display: flex;flex-direction: row;align-items: center;justify-content: center;box-shadow: 0 0 3px 0 #e3e3e3;z-index: 99;}
.head-img {width: 53px;height: 17px;margin-top: 20px;}
.box img {margin-right: 10px;width: 14px;height: 14px;margin-bottom: -2px;}
.books-container {margin-top: 5px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;padding: 0 45px;}

</style>